<template>
  <div class="bg-white">
    <Row>
      <Col span="22">
        <SearchForm @get="handleSearch"></SearchForm>
      </Col>
      <Col span="2">
        <div class="btn-wrapper">
          <span v-per="'createTenantAppAuth'">
            <Button class="editable-add-btn" type="primary" @click="handleAdd"
              ><template #icon><PlusOutlined /></template>新增企业应用授权</Button
            >
          </span>
        </div>
      </Col>
    </Row>
    <br />
    <Table
      :bordered="true"
      :dataSource="dataSource"
      :columns="entAppAuthColumns"
      :pagination="false"
      :loading="loading"
      :scroll="scroll"
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span v-per="'updateTenantAppAuth'">
            <a @click="edit(record)">编辑</a>
          </span>
          <Popconfirm
            v-if="dataSource.length"
            title="是否确认删除？"
            @confirm="onDelete(record)"
            ok-text="确定"
            cancel-text="取消"
          >
            <span v-per="'deleteTenantAppAuth'"
              ><Divider v-if="!record.isSubscribed" type="vertical" /><a v-if="!record.isSubscribed">删除</a></span
            >
          </Popconfirm>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />
  </div>
  <AddAuth ref="addAuth" @get="getDataSource" />
  <EditModal ref="editModal" @submitSuccess="getDataSource" />
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { Table, Pagination, Row, Col, Button, Divider, Popconfirm, message } from 'ant-design-vue';
import SearchForm from '/@/views/tenant-center/enterpriseAppAuth/component/SearchForm.vue';
import AddAuth from '/@/views/tenant-center/enterpriseAppAuth/component/AddAuth.vue';
import EditModal from '/@/views/tenant-center/enterpriseAppAuth/component/EditModal.vue';
import { entAppAuthColumns } from './data';
import { deleteAppAuth, getAppAuthTable } from '/@/api/tenant-mgmt/enterpriseAppAuth/enterpriseAppAuth';
const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
const dataSource = ref();
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);

let params = {
  current: current.value,
  size: pageSize.value,
  tenantId: undefined,
  appId: undefined,
  packageId: undefined,
};

const getDataSource = async () => {
  try {
    let data = await getAppAuthTable(params);
    dataSource.value = data.items;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  if (val <= 10) {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});
const onDelete = async (record) => {
  let res = await deleteAppAuth(record.id);
  if (res) {
    message.success('删除成功');
  }
  getDataSource();
};
const handleSearch = (searchParam) => {
  params = {
    current: current.value,
    size: pageSize.value,
    tenantId: searchParam.tenantId,
    appId: searchParam.appId,
    packageId: searchParam.packageId,
  };
  getDataSource();
};

const addAuth = ref();
const editModal = ref();
const edit = async (record) => {
  editModal.value.openEdit(record);
};

const handleAdd = () => {
  addAuth.value.openAddAuth();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
